/*
		1.先将左右键注册
		2.实现图片的无限滚动（无缝滚动）
		3.实现按钮的切换功能
		4.延迟切换 利用定时器serTimeout 来实现效果
		5.自动播放 设置定时器setInterval

	*/
	window.onload = function(){
	//定义变量
	var container_1 = document.getElementById("container_1");

	var list = document.getElementById("list");
	//获取到的图片集合
	var imgs = list.getElementsByTagName('img');

	var buttons = document.getElementById("buttons");
	var btns = buttons.getElementsByTagName("span");
	//左边按钮
	var prev = document.getElementById("prev");
	//右边按钮
	var next = document.getElementById("next");
	//图片按钮的角标0~4
	var index =1;
	//用于优化动画
	var animated = false;

	var timer;
	//添加高亮样式
	function showBtn(){
		for(var i=0;i<btns.length;i++){
			if(btns[i].className=="on"){
				btns[i].className="";
				break;
			}
		}
		//index-1得到角标4
		btns[index-1].className = "on";
	}


		//实现动画图片的 滑动
		function animate(offset){
			animated = true;

			var newLeft = parseInt(list.style.left)+offset;

			var time = 300; //位移总时间；
			var interval = 10; //位移间隔
			var speed = offset/(time/interval);  //每一次位移量

			function go(){ //animate的内部 函数 实现滑动
				if((speed<0 && parseInt(list.style.left)>newLeft) ||(speed>0 && parseInt(list.style.left)<newLeft)){
					list.style.left = parseInt(list.style.left)+speed+"px";

					//setTimeout定时器 是 只会执行一次 就结束 
					// 在这里能执行多次是因为 应用了递归在调用
					setTimeout(go,interval);  //递归
				}else{
					animated = false;  //动画执行完毕的
					list.style.left = newLeft+"px";
					//实现无限滚动 判断当图片为附五图片时 替换为真正的图五
					if(newLeft>-620){list.style.left=-3100+"px";}
					if(newLeft<-3100){list.style.left=-620+"px";}	
				}
			}
			go();
		}
		//切换 定时器 每隔3秒点一下右键next
		//setInterval的定时器是 可以一直去执行
		function play(){
			timer = setInterval(function(){next.onclick();},3000)
		}

		//清除定时器 当鼠标移动上去的时候
		function stop(){
			clearInterval(timer);
		}

		//上一页
		prev.onclick = function(){
			//paseInt()是将（）里面的字符进行强制转换
			// list.style.left = parseInt(list.style.left)+620+"px";
			if(!animated){  //animated == false;时
				animate(620);
			}
			//当图片向左滚动到第一张时， 将他换为第五张
			if(index==1){
				index=5;
			}else{
				index -=1;	
			}
			showBtn();

		}
		//下一页
		next.onclick = function(){
			// list.style.left = parseInt(list.style.left)-620+"px";
			if(!animated){  //animated == false;时
				animate(-620);
			}
			if(index==5){
				index=1;
			}else{
				index +=1;
			}
			showBtn();
		}
		for(var i=0;i<btns.length;i++){
			btns[i].onclick = function(){
				if(this.className=="on"){ return;}
				var myIndex = parseInt(this.getAttribute("index"));
				var offset = -620*(myIndex-index);
				index=myIndex;
				showBtn();
				if(!animated){  //animated == false;时
					animate(offset);
				}

			}
		}
		//调用当鼠标移动上去停止
		container_1.onmouseover = stop;
		//调用当鼠标移开继续播放
		container_1.onmouseout = play;
		//正常播放
		play();
	}